Using Cascading Style Sheets > About cascading style sheets > Selectors
 		><

Selectors


Unlike in a printed document, the structure of an HTML page determines its formatting. Tags that identify the position within that structure enclose the content. This underlying principle makes it difficult to address individual items of text for formatting, thus creating a need for a different addressing mechanism. CSS uses selectors to solve that problem. A selector is a string of code that identifies what elements the corresponding rule applies to. It connects the HTML page with the style sheet.

Selectors may have several components:
  • Tags: All HTML tags are possible selectors. If used as a selector, the enclosing less than (<) and greater than (>) characters are removed.
  • Classes: All elements inside the BODY section can be classed by adding a CLASS attribute. Classes can then be addressed in the style sheet to apply the formatting rules. A class definition consists of a period followed by string of text and a rule--for example, .headline {color: green}. When defining classes in Adobe GoLive, you don't have to type the period; Adobe GoLive will automatically add the period to the source code.

    • Two major classes of selectors are used with cascading style sheets:
  • Simple Selectors match elements based on the element type and/or attributes, not the element's position in the document structure. H1 (all level 1 headers) and H1.headline (all level 1 headers with the CLASS attribute.headline) are examples of simple selectors.
  • Contextual Selectors match elements based on their position in the document structure. A contextual selector consists of several simple selectors. H1.headline B (all level 1 headers with the CLASS attribute .headline and bold typeface) is an example of a contextual selector consisting of two simple selectors, H1.headline and B. Future versions of Adobe GoLive will support contextual selectors.

    • The ID selector is a special case that allows for setting style properties on a per-element basis. It addresses a single element within the HTML document by adding an ID attribute with an alphanumeric identifier. In the style sheet, the same identifier is combined with a rule to apply special formatting. An ID definition consists of a pound sign (#) followed an alphanumerical identifier and a rule--for example, #xy99 {font-weight: 100}.

    Using Cascading Style Sheets > About cascading style sheets > Selectors